<template>
  <div class="nav-sider-wrap">
    <el-menu
      active-text-color="#ffd04b"
      background-color="#545c64"
      class="el-menu-vertical-demo"
      default-active="2"
      text-color="#fff"
    >
      <template v-for="item in menulist" :key="item.id">
        <el-sub-menu :index="item.id" v-if="item.children?.length">
          <!-- 渲染二级 -->
          <template #title v-if="item.type === 1">
            <el-icon><location /></el-icon>
            <span>{{ item.name }}</span>
          </template>

          <template v-if="item.children?.length">
            <el-menu-item-group>
              <template v-for="i in item.children" :key="i.id">
                <el-menu-item :index="i.id">{{ i.name }}</el-menu-item>
              </template>
            </el-menu-item-group>
          </template>
        </el-sub-menu>

        <el-menu-item :index="item.id" v-else>
          <el-icon><location /></el-icon>
          <span>{{ item.name }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";

const menulist = reactive([
  {
    id: 1,
    name: "系统总览",
    type: 1,
    children: [
      { name: "核心技术", type: 2, id: 11 },
      { name: "核心技术2", type: 2, id: 12 },
    ],
  },
  {
    id: 2,
    name: "系统管理",
    type: 1,
    children: [
      { name: "用户管理", type: 2, id: 21 },
      { name: "部门管理", type: 2, id: 22 },
      { name: "菜单管理", type: 2, id: 23 },
      { name: "角色管理", type: 2, id: 24 },
    ],
  },
  {
    id: 2,
    name: "随便聊聊",
    type: 2,
  },
]);
</script>

<style lang="scss" scoped>
.nav-sider-wrap {
  height: 100vh;
  background-color: #0c2135;
}
</style>
